<script setup lang="ts">
import { hideLoading, showLoading, usePullDownRefresh, stopPullDownRefresh } from '@tarojs/taro';

definePageConfig({
    navigationBarTitleText: '电子发票',
    enablePullDownRefresh: true
});
import { useNurseBill } from '@/service';
import { storeToRefs } from 'pinia';
import { ref, computed } from 'vue';
import { useAuthStore } from '@/store';

import { useDayjs } from '@/hooks/common';

const { nurseUser } = storeToRefs(useAuthStore());

const { $dayjs } = useDayjs();

const { listNurseUserBillInvoiceByMainId } = useNurseBill();

const list = ref();

usePullDownRefresh(() => {
    getData();
    stopPullDownRefresh();
});

getData();

const date = computed(() => (createTime: string) => {
    if (createTime) {
        const date = $dayjs(createTime).format('YYYY-MM-DD');
        return date;
    }
    return '';
});
async function getData() {
    showLoading({ title: '正在请求数据...' });

    const { error, success } = await listNurseUserBillInvoiceByMainId({
        pageNo: 1,
        pageSize: 10,
        userId: nurseUser.value.id
    });

    if (!error && success?.records) {
        const data = success?.records.map((item: any) => {
            return {
                ...item,
                src: item.pic,
                imgUrl: item.pic
            };
        });
        list.value = [...data];
    }
    hideLoading();
}
const showPreview = ref(false);

const initNo = ref(0);

const hideFn = () => {
    showPreview.value = false;
};
</script>
<template>
    <basic-layout>
        <!-- <custom-navbar title="电子发票" showLeft /> -->
        <view class="w-375px flex-col-center">
            <nut-empty v-if="list?.length == 0" description="暂无电子发票"></nut-empty>
            <view class="w-360px">
                <nut-cell v-for="item in list" class="flex-col-center w-full" @click="
                    () => {
                        if (item.pic) showPreview = true;
                    }
                ">
                    <view class="w-full flex-center justify-between">
                        <view>{{ item.receiveType == '1' ? '普通电子发票' : '增值税电子发票' }}</view>
                        <view>{{ item.invoiceHeader }}</view>
                    </view>
                    <view class="w-full flex-center justify-between">
                        <nut-tag v-if="item.status == '1'" type="warning">待处理</nut-tag>
                        <nut-tag v-if="item.status == '2'" type="success">已完成</nut-tag>
                        <view>总金额:￥{{ item.totalPrice }}</view>
                    </view>
                    <view class="w-full flex-center justify-between">
                        <view>{{ date(item.createTime) }}</view>
                        <view>{{ item.mode == '1' ? item.phone : item.email }}</view>
                        <!-- <view>{{ item.mode == '1' ? '手机' : '电子邮件' }}</view> -->
                    </view>

                    <!-- <view class="w-full flex-center justify-between">
                        <view>发票下载地址:{{ item.url }}</view>
                    </view> -->
                    <!-- <view class="w-full flex-center justify-start">

                    </view> -->
                </nut-cell>
            </view>
        </view>
        <nut-ImagePreview pagination-color="#059669" closeable close-icon-position="top-left" :show="showPreview"
            pagination-visible :images="list" :init-no="initNo" @close="hideFn" />
    </basic-layout>
</template>
